/*
 * @Author: 肖思汗 
 * @Date: 2025-05-19 22:17:08 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-30 15:10:49
 */

import { Button } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { autorun } from "mobx";
import { ReactNode, useEffect } from "react";
import PreView2D3D from "./PreView2D3D/PreView2D3D";
import styles from "./rightTop.module.less";
import rightTopStore from "./rightTopStore";
import preView2D3DStore from "./PreView2D3D/preView2D3DStore";
import perview3der from "./PreView2D3D/perview3der";

// 主页
import { observer } from "mobx-react-lite";
import utilsStore from "src/utils/utilsStore";
import utils from "src/utils/utils";
import clsx from "clsx";
import stickerModelStore from "../StickerModel/stickerModelStore";
import templateModelStore from "../TemplateModel/templateModelStore";
import textModelStore from "../TextModel/textModelStore";
import leftTopStore from "../LeftTop/leftTopStore";
import maskModelStore from "../MaskModel/maskModelStore";

// 右上角的预览和保存
const RightTop = observer(() => {

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {

    }, { delay: 30 }), []);

    return (
        <View
            className={clsx(
                styles.rightTop,
                (
                    stickerModelStore.show ||
                    leftTopStore.showColorPicker ||
                    textModelStore.show ||
                    templateModelStore.show ||
                    maskModelStore.show
                ) && styles.hide
            )}
            style={{
                top: utilsStore.titleTop + utils.rpx2px(30)
            }}
        >

            <Button
                className={styles.perview}
                onClick={() => {
                    preView2D3DStore.setShow(true);
                    perview3der.requestRender();
                }}
            >
                预览
            </Button>

            <Button
                id="save"
                className={styles.save}
                type="primary"
                loading={rightTopStore.saveing}
                onClick={async () => {
                    await rightTopStore.save();
                    // 关闭预览弹窗
                    preView2D3DStore.setShow(false);
                }}
            >保存</Button>

            {/* 预览弹窗 */}
            <PreView2D3D />

        </View>
    );
});

export default RightTop;